<template>
  <div class="detail">
    <div class="common-div-card">
      <el-form :model="form" class="form" label-width="auto" size="small">
        <el-form-item label="热轧厚度超差位置[m]：">
          <el-text>{{ form.thick }}</el-text>
        </el-form-item>
        <el-form-item label="热轧宽度超差位置[m]：">
          <el-text>{{ form.width }}</el-text>
        </el-form-item>
        <el-form-item label="热轧凸度超差位置[m]：">
          <el-text>{{ form.crown }}</el-text>
        </el-form-item>
        <el-form-item label="热轧楔形超差位置[m]：">
          <el-text>{{ form.wedge }}</el-text>
        </el-form-item>
        <el-form-item label="热轧对称平坦度超差位置[m]：">
          <el-text>{{ form.symmetrical }}</el-text>
        </el-form-item>
        <el-form-item label="热轧非对称平坦度超差位置[m]：">
          <el-text>{{ form.asymmetrical }}</el-text>
        </el-form-item>
        <el-form-item label="热轧终轧温度超差位置[m]：">
          <el-text>{{ form.endurance }}</el-text>
        </el-form-item>
        <el-form-item label="热轧层冷温度超差位置[m]：">
          <el-text>{{ form.laminarCooling }}</el-text>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-div-card alloying-element">
      <div class="alloying-element-graph">
        <a-e-line
          :data1="alloyingElement"
          :data2="alloyingElementUpper"
          :data3="alloyingElementLower"
          :datax="alloyingElementX"
          :title="'合金元素偏差'"
          :dataName="['当前值', '最大值', '最小值']"
        />
      </div>
      <div class="alloying-element-table">
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          table-layout="auto"
          style="width: 100%"
          ref="tableRef"
          size="small"
          show-overflow-tooltip
        >
          <el-table-column width="60" prop="chinese" />
          <el-table-column v-for="item in alloyingElementX" :key="item" :prop="item" :label="item" :min-width="60">
            <template #default="scope">
              <span v-if="scope.row.chinese === '状态'">
                <el-tag :type="scope.row[item] === '正常' ? 'success' : 'danger'">{{ scope.row[item] }}</el-tag>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="common-div-card graph-height">
      <graph-line :data1="thickDeviation" :datax="Array.from({ length: thickDeviation.length }, (_, i) => i + 1)" :data-name="['热轧厚度偏差']" />
    </div>
    <div class="common-div-card graph-height">
      <double-line
        :data1="widthDeviation"
        :data2="middleDeviation"
        :datax="Array.from({ length: widthDeviation.length }, (_, i) => i + 1)"
        :data-name="['热轧宽度偏差', '中心线偏差']"
        :mark-line1="widthDevUpper"
        :mark-line2="widthDevLower"
        :mark-line3="middleDevUpper"
        :mark-line4="middleDevLower"
        :is-scale="true"
      />
    </div>
    <div class="common-div-card graph-height">
      <graph-line :data1="thick" :datax="Array.from({ length: thick.length }, (_, i) => i + 1)" :data-name="['热轧厚度']" :is-scale="true" />
    </div>
    <div class="common-div-card graph-height">
      <graph-line
        :data1="width"
        :datax="Array.from({ length: width.length }, (_, i) => i + 1)"
        :data-name="['热轧宽度']"
        :mark-line1="widthUpper"
        :mark-line2="widthLower"
        :is-scale="true"
      />
    </div>
    <div class="common-div-card graph-height">
      <graph-line
        :data1="crown"
        :data2="wedge"
        :datax="Array.from({ length: crown.length }, (_, i) => i + 1)"
        :data-name="['凸度曲线', '楔形曲线']"
        :mark-line1="crownUpper"
        :mark-line2="crownLower"
        :mark-line3="wedgeUpper"
        :mark-line4="wedgeLower"
      />
    </div>
    <div class="common-div-card graph-height">
      <graph-line
        :data1="symmetrical"
        :data2="asymmetrical"
        :datax="Array.from({ length: symmetrical.length }, (_, i) => i + 1)"
        :data-name="['对称平坦度', '非对称平坦度']"
        :mark-line1="symmetricalUpper"
        :mark-line2="symmetricalLower"
        :mark-line3="asymmetricalUpper"
        :mark-line4="asymmetricalLower"
      />
    </div>
    <div class="common-div-card graph-height">
      <graph-line
        :data1="endurance"
        :data2="laminarCooling"
        :datax="Array.from({ length: symmetrical.length }, (_, i) => i + 1)"
        :data-name="['终轧温度', '层冷温度']"
        :mark-line1="enduranceUpper"
        :mark-line2="enduranceLower"
        :mark-line3="laminarCoolingUpper"
        :mark-line4="laminarCoolingLower"
        :is-scale="true"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, onBeforeMount } from 'vue';
  import AELine from './alloyingElementLine.vue';
  import GraphLine from './GraphLine.vue';
  import doubleLine from './doubleLine.vue';

  const props = defineProps({
    coilNo: { type: String, default: '' },
  });

  interface Form {
    thick: string;
    width: string;
    crown: string;
    wedge: string;
    symmetrical: string;
    asymmetrical: string;
    endurance: string;
    laminarCooling: string;
  }

  const form: Form = reactive({
    thick: '1',
    width: '2',
    crown: '3',
    wedge: '4',
    symmetrical: '5',
    asymmetrical: '6',
    endurance: '7',
    laminarCooling: '8',
  });

  const tableData = ref<any[]>([
    {
      chinese: '当前值',
      C: 0.045,
      Si: 0.019,
      Mn: 0.162,
      P: 0.026,
      S: 0.008,
      Alt: 0.039,
      V: 0.0018,
      Ti: 0.001,
      Nb: 0.0013,
      Cr: 0.038,
      Mo: 0.00386,
      N: 0.0039,
    },
    {
      chinese: '最大值',
      C: 0.0636,
      Si: 0.03156,
      Mn: 0.21044,
      P: 0.02747,
      S: 0.01628,
      Alt: 0.0689,
      V: 0.00281,
      Ti: 0.00384,
      Nb: 0.00661,
      Cr: 0.05705,
      Mo: 0.00919,
      N: 0.00504,
    },
    {
      chinese: '最小值',
      C: 0.02589,
      Si: 0.00164,
      Mn: 0.13857,
      P: 0.00529,
      S: 0.00057,
      Alt: 0.01755,
      V: 0.00085,
      Ti: 0,
      Nb: 0,
      Cr: 0.00865,
      Mo: 0.00071,
      N: 0.0015,
    },
    {
      chinese: '状态',
      C: '正常',
      Si: '正常',
      Mn: '正常',
      P: '正常',
      S: '正常',
      Alt: '正常',
      V: '正常',
      Ti: '正常',
      Nb: '正常',
      Cr: '异常',
      Mo: '正常',
      N: '正常',
    },
  ]);

  // ----------------------------------------------  曲线数据 ---------------------------------------------------------------------------------
  // 合金元素偏差
  const alloyingElement = ref<any[]>([0.045, 0.019, 0.162, 0.026, 0.008, 0.039, 0.0018, 0.001, 0.0013, 0.038, 0.00386, 0.0039]);
  const alloyingElementUpper = ref<any[]>([0.0636, 0.03156, 0.21044, 0.02747, 0.01628, 0.0689, 0.00281, 0.00384, 0.00661, 0.05705, 0.00919, 0.00504]);
  const alloyingElementLower = ref<any[]>([0.02589, 0.00164, 0.13857, 0.00529, 0.00057, 0.01755, 0.00085, 0, 0, 0.00865, 0.00071, 0.0015]);
  const alloyingElementX = ref<any[]>(['C', 'Si', 'Mn', 'P', 'S', 'Alt', 'V', 'Ti', 'Nb', 'Cr', 'Mo', 'N']);

  // 热轧厚度偏差
  const thickDeviation = ref<any[]>([1, 2, 3, 4, 5, 6, 7, 8]);
  // 热轧宽度偏差、中心线偏差
  const widthDeviation = ref<any[]>([31, 22, 24, 19, 20, 22, 18, 17, 20, 19, 20, 22, 18, 17, 20, 19, 20, 22, 18, 17, 20, 19, 20]);
  const middleDeviation = ref<any[]>([5, 9, 5, 1, 0, -4, 3, 2, 6, 4, 15, 10, 12, 7, 12, 7, 0, -15, -27, -22, -8, -12]);
  const widthDevUpper = ref(25);
  const widthDevLower = ref(15);
  const middleDevUpper = ref(15);
  const middleDevLower = ref(-2);
  // 热轧厚度
  const thick = ref<any[]>([1, 2, 3, 4, 5, 6, 7, 8]);
  // 热轧宽度
  const width = ref<any[]>([1260, 1261, 1263, 1254, 1252, 1256, 1249, 1248, 1240]);
  const widthUpper = ref(1255);
  const widthLower = ref(1245);
  // 凸度曲线、楔形曲线
  const crown = ref<any[]>([0, 12, 23, 14, -5, -16, -27, -18]);
  const wedge = ref<any[]>([1, 5, -3, 4, -5, 9, 17, 8, -1]);
  const crownUpper = ref(30);
  const crownLower = ref(-30);
  const wedgeUpper = ref(20);
  const wedgeLower = ref(-20);

  // 对称平坦度、非对称平坦度
  const symmetrical = ref<any[]>([5, 28, 85, 160, 260, 185, 120, 65, 34, 18, 9, 5, 3, 2, -21, -31, 0, 0, 0, 0]);
  const asymmetrical = ref<any[]>([-6, -9, -12, -7, -15, -11, -7, -5, -4, -3, -3, -2, -2, -21, -1, -1, -2, -1, -1, -1]);
  const symmetricalUpper = ref(270);
  const symmetricalLower = ref(-30);
  const asymmetricalUpper = ref(30);
  const asymmetricalLower = ref(-20);

  // 终轧温度、层冷温度
  const endurance = ref<any[]>([780, 920, 780, 920, 924, 928, 922, 930, 935, 921, 927, 929, 930, 934, 935, 923, 923, 934, 924, 925]);
  const laminarCooling = ref<any[]>([580, 640, 650, 620, 620, 580, 580, 600, 610, 612, 614, 616, 618, 620, 618, 616, 614, 612, 610, 490]);
  const enduranceUpper = ref(950);
  const enduranceLower = ref(900);
  const laminarCoolingUpper = ref(615);
  const laminarCoolingLower = ref(585);
</script>
<style lang="less" scoped>
  .detail {
    display: flex;
    gap: 1rem;
    flex-direction: column;
  }
  .common-div-card {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    padding: 12px;
  }

  .el-text {
    color: rgb(149, 212, 117);
    font-weight: 700;
  }

  .graph-height {
    height: 30vh;
  }

  .form {
    padding: 12px;
  }

  .alloying-element {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .alloying-element-graph {
      height: 30vh;
    }

    .alloying-element-table {
      width: 100%;
    }
  }
</style>
